<template>
  <div class="user-manage">
    <a-input-search
      placeholder="输入用户id进行搜索"
      style="width: 400px"
      size="large"
      :allowClear="true"
      @search="onSearch"
    />
    <!-- <el-main>
      <el-table :data="tableData" style="width: 100%">
      <el-table-column label="用户ID" width="300" align="center">
        <template slot-scope="scope">
          <i class="el-icon-user-solid"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" width="200" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>ID: {{ scope.row.id }}</p>
            <p>昵称: {{ scope.row.nickname }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.nickname }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="手机" width="180" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" width="220" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-main> -->
    <a-table
      :columns="columns"
      :row-key="(record) => record.id"
      :data-source="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
    >
      <template slot="id" slot-scope="text">
        {{ text }}
      </template>
      <template slot="nickname" slot-scope="text">
        {{ text }}
      </template>
      <template slot="phone" slot-scope="text">
        {{ text }}
      </template>
      <template slot="email" slot-scope="text">
        {{ text }}
      </template>
      <template slot="operation" slot-scope="text, record">
        <div @click="deleteMsg(record.id)" class="delete">删除</div>
        <!-- <a-icon type="delete" /> -->
      </template>
    </a-table>
  </div>
</template>

<script>
const align = "center";
const columns = [
  {
    title: "用户ID",
    dataIndex: "id",
    key: "id",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "id" },
  },
  {
    title: "用户昵称",
    dataIndex: "nickname",
    key: "nickname",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "nickname" },
  },
  {
    title: "手机号码",
    dataIndex: "phone",
    key: "phone",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "phone" },
  },
  {
    title: "邮箱",
    dataIndex: "email",
    key: "email",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "email" },
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: "20%",
    ellipsis: true,
    align: align,
    scopedSlots: { customRender: "operation" },
  },
];
const data = [
  {
    id: "11111",
    nickname: "用户昵称",
    phone: "13531550177",
    email: "1018961123@qq.com",
  },
  {
    id: "11112",
    nickname: "用户昵称",
    phone: "13531550177",
    email: "1018961123@qq.com",
  },
  {
    id: "11113",
    nickname: "用户昵称",
    phone: "13531550177",
    email: "1018961123@qq.com",
  },
  {
    id: "11114",
    nickname: "用户昵称",
    phone: "13531550177",
    email: "1018961123@qq.com",
  },
  {
    id: "11115",
    nickname: "用户昵称",
    phone: "13531550177",
    email: "1018961123@qq.com",
  },
  {
    id: "11116",
    nickname: "用户昵称",
    phone: "13531550177",
    email: "1018961123@qq.com",
  },
];
import {
  getUserList,
  deleteUser,
  GetUserInfo,
  searchUser,
} from "../../../network/user";
export default {
  name: "",
  components: {},
  // data() {
  //   return {
  //     tableData: [
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "我不是我不是我",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "哈哈哈哈哈哈哈哈",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "细嗅嘻嘻嘻嘻嘻",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //       {
  //         id: "6048f198fcdcd85ca4a1d7ca",
  //         nickname: "呵呵呵呵呵呵呵呵",
  //         phone: "13531550177",
  //         email: "1018961123@qq.com",
  //       },
  //     ],
  //   };
  // },
  // methods: {
  //   handleEdit(index, row) {
  //     console.log(index, row);
  //   },
  //   handleDelete(index, row) {
  //     console.log(index, row);
  //     this.$confirm("删除该用户, 是否确定?", "提示", {
  //       confirmButtonText: "确定",
  //       cancelButtonText: "取消",
  //       type: "warning",
  //     })
  //       .then(() => {
  //         this.$toast.show("删除成功", "success", 1000);
  //       })
  //       .catch(() => {
  //         this.$toast.show("取消删除", "default", 1000);
  //       });
  //   },
  // },
  data() {
    return {
      data: [],
      pagination: {
        hideOnSinglePage: true,
        defaultPageSize: 9,
        showQuickJumper: true,
      },
      loading: false,
      columns,
    };
  },
  mounted() {
    // this.fetch();
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const res = await getUserList();
      if (res.data.code === 200) {
        console.log(res);
        const arr = [];
        res.data.data.forEach((ele) => {
          const userInfo = new GetUserInfo(ele);
          arr.push(userInfo);
        });
        this.data = arr;
      }
      const pagination = { ...this.pagination };
      pagination.total = this.data.length;
      this.loading = false;
      this.pagination = pagination;
    },
    async onSearch(value, event) {
      console.log("value", value);
      if (value) {
        const res = await searchUser(value);
        console.log(res);
        if (res.data.code === 200) {
          const userInfo = new GetUserInfo(res.data.data);
          this.data = [userInfo];
        }
      } else {
        this.getUserList();
      }
    },
    deleteMsg(id) {
      console.log(id);
      const self = this;
      this.$confirm({
        title: "删除用户",
        content: "确定删除该用户吗",
        okText: "确认",
        cancelText: "取消",
        async onOk() {
          const res = await deleteUser(id);
          if (res.data.code === 200) {
            self.$message.success("已成功删除该用户");
            self.getUserList();
          }
        },
        onCancel() {
          self.$message.info("取消删除");
        },
      });
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters,
      });
    },
    fetch(params = {}) {
      console.log("params:", params);
      this.loading = true;

      getUserList().then((res) => {
        if (res.data.code === 200) {
          console.log(res);
          const arr = [];
          res.data.data.forEach((ele) => {
            const userInfo = new GetUserInfo(ele);
            arr.push(userInfo);
          });
          this.data = arr;
        }
        const pagination = { ...this.pagination };
        pagination.total = this.data.length;
        this.loading = false;
        this.pagination = pagination;
      });

      // reqwest({
      //   url: 'https://randomuser.me/api',
      //   method: 'get',
      //   data: {
      //     results: 10,
      //     ...params,
      //   },
      //   type: 'json',
      // }).then(data => {
      //   const pagination = { ...this.pagination };
      //   // Read total count from server
      //   // pagination.total = data.totalCount;
      //   pagination.total = 200;
      //   this.loading = false;
      //   this.data = data.results;
      //   this.pagination = pagination;
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.user-manage {
  width: 100%;
  text-align: center;
  /deep/.ant-input-affix-wrapper {
    margin-bottom: 25px;
  }
  .delete {
    color: #cccccc;
    cursor: pointer;
    &:hover {
      color: #041527;
    }
  }
}
</style>
